<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sign Up Login</title>
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>

<body>

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>



<div class="cotn_principal">
  <div class="cont_centrar">
    <div class="cont_login">
      <div class="cont_info_log_sign_up">
        <div class="col_md_login">
          <div class="cont_ba_opcitiy">
            <h2>LOGIN</h2>
            <p>登录流量监测管理系统</p>
            <button class="btn_login" onClick="cambiar_login()">LOGIN</button>
          </div>
        </div>
        <div class="col_md_sign_up">
          <div class="cont_ba_opcitiy">
            <h2>SIGN UP</h2>
            <p>注册管理员</p>
            <button class="btn_sign_up" onClick="cambiar_sign_up()">SIGN UP</button>
          </div>
        </div>
      </div>
      <div class="cont_back_info">
        <div class="cont_img_back_grey"> <img src="po.jpg" alt="" /> </div>
      </div>
      <div class="cont_forms" >
        <div class="cont_img_back_"> <img src="po.jpg" alt="" /> </div>
        <div class="cont_form_login"> <a href="#" onClick="ocultar_login_sign_up()" ><i class="material-icons">&#xE5C4;</i></a>
          <h2>LOGIN</h2>
          <input id="login_username" name="username" type="text" placeholder="用户名" />
          <input id="login_password" name="password" type="password" placeholder="密码" />
          <button class="btn_login" onclick="login_on_click()" >LOGIN</button>
        </div>
        <div class="cont_form_sign_up"> <a href="#" onClick="ocultar_login_sign_up()"><i class="material-icons">&#xE5C4;</i></a>
          <h2>SIGN UP</h2>
          <input id="reg_username" type="text" placeholder="用户名" />
          <input id="reg_password" type="password" placeholder="密码" />
          <input id="reg_password_again" type="password" placeholder="确认密码" />
          <button class="btn_sign_up" onclick="reg_on_click()">SIGN UP</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script th:src="@{/js/index.js}"></script>
<script th:src="@{/js/jquery-3.5.1.min.js}" type="text/javascript"></script>
<script>
  function reg_on_click() {
    let username = $("#reg_username").val();
    let password = $("#reg_password").val();
    let password_again = $("#reg_password_again").val();
    if (password===password_again){
      $.post('/user/reg',{
        username,
        password
      },function (data){
        alert("注册成功！");
      });
    }else {
      alert("密码不一致！");
    }

  }
</script>
<script>
  function login_on_click() {
    var username = $("#login_username").val();
    var password = $("#login_password").val();
    $.post('/user/login',{
      username,
      password,
    },function (){
      window.location.href = '/data'
    }).fail(function (){
      alert("账号或密码错误！请重试!");
      $("#login_username").val("");
      $("#login_password").val("");

    });
  }

</script>

</body>
</html>
